<script setup lang="ts">
import http from '@/http';
import { ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';

// 存储当前选中的行数据
const selectedRows = ref([]);
let flg = ref(false)
// 表格的引用
const tableRef = ref(null);

// 处理表格选择项变化的方法
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
  flg.value = rows.length > 0;
};
//当前页的页号发生改变
const handleCurrentChange = (val: number) => {
  //console.log(`current page: ${val}`)
  //重新获取当前页的数据
  pageNum.value = val
  page()
}
//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(5)
//总条数
let total = ref(0)
//条件
let producterName = ref('')
let keywords = ref('')
let producterTel = ref('')
let status = ref('')
let createTime = ref('')
//表格数据
let proDate = ref([])

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  page();
};
//获取数据
function page() {
  http.get('producter/page', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      producterName: producterName.value,
      keywords: keywords.value,
      producterTel: producterTel.value,
      status: status.value,
      createTime: createTime.value
    }
  }).then((res) => {
    proDate.value = res.list
    total.value = res.total
  });
}
onMounted(() => {
  page();

});
function search() {
  page();
}
function reset() {
  producterName.value = ''
  keywords.value = ''
  producterTel.value = ''
  status.value = ''
  createTime.value = ''
  page();
}
//删除
function handleDelete(index, row) {
  ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    http.get('producter/delete', { params: { producterId: row.producterId } }).then((res) => {
      if (res > 0) {
        //弹出提示信息
        ElMessageBox({
          message: '删除成功',
          type: 'success',
          title: '提示'
        })
        page();
      }
    });
  }).catch(() => {
    //弹出提示信息
    ElMessageBox({
      message: '已取消删除',
      type: 'info',
      title: '提示'
    })
  });
}
//批量删除
function handleDelete1() {
  ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let ids = selectedRows.value.map((item) => item.producterId).join(',')
    http.get('producter/deletes', { params: { producterIds: ids } }).then((res) => {
      if (res > 0) {
        //弹出提示信息
        ElMessageBox({
          message: '删除成功',
          type: 'success',
          title: '提示'
        })
        page();
      }
    });
  }).catch(() => {
    //弹出提示信息
    ElMessageBox({
      message: '已取消删除',
      type: 'info',
      title: '提示'
    })
  });
}
//添加
let dialogVisible = ref(false);
let producter = ref({
  producterId: '0',
  producterName: '',
  producterCode: '',
  producterPerson: '',
  producterTel: '',
  producterAddress: '',
  keywords: '',
  status: '0',
})
//添加按钮
function addproducter() {
  dialogVisible.value = true;
}
//添加确定按钮
function add() {
  http.post('producter/add', producter.value).then((res) => {
    if (res > 0) {
      //弹出提示信息
      ElMessageBox({
        message: '添加成功',
        type: 'success',
        title: '提示'
      })
      dialogVisible.value = false;
      page();
    }
  });
}
//添加取消按钮
function close() {
  dialogVisible.value = false;
  producter.value = {
    producterId: '0',
    producterName: '',
    producterCode: '',
    producterPerson: '',
    producterTel: '',
    producterAddress: '',
    keywords: '',
    status: '0',
  }
}
//关闭弹窗
function handleDialogClose() {
  dialogVisible.value = false;
  producter.value = {
    producterId: '0',
    producterName: '',
    producterCode: '',
    producterPerson: '',
    producterTel: '',
    producterAddress: '',
    keywords: '',
    status: '0',
  }
}
let dialogVisible1 = ref(false);
//修改
function handleUpdate(index, row) {
  dialogVisible1.value = true;
  producter.value = row;
}
//修改确定按钮
function updateproducter() {
  http.post('producter/update', producter.value).then((res) => {
    if (res > 0) {
      //弹出提示信息
      ElMessageBox({
        message: '修改成功',
        type: 'success',
        title: '提示'
      })
      dialogVisible1.value = false;
      page();
    }
  });
}
//修改取消按钮
function close1() {
  dialogVisible1.value = false;
  producter.value = {
    producterId: '0',
    producterName: '',
    producterCode: '',
    producterPerson: '',
    producterTel: '',
    producterAddress: '',
    keywords: '',
    status: '0'
  }
}
</script>

<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple">
            厂家名称 <el-input v-model="producterName" placeholder="请输入厂家名称" style="width: 120px;"></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple">
            关键字 <el-input v-model="keywords" placeholder="请输入关键字" style="width: 120px;"></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple">
            厂家电话 <el-input v-model="producterTel" placeholder="请输入厂家电话" style="width: 120px;"></el-input>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="grid-content ep-bg-purple-light">
            状态
            <el-select v-model="status" placeholder="可用状态" style="width: 120px;">
              <el-option label="正常" value="0" />
              <el-option label="停用" value="1" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple">
            创建时间 <el-date-picker v-model="createTime" type="date" placeholder="选择日期"
              style="width: 180px;"></el-date-picker>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="2">
          <div class="grid-content ep-bg-purple-light">
            <el-button type="primary" icon="search" @click="search" width="100px">搜索</el-button>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content ep-bg-purple-light">
            <el-button icon="Refresh" @click="reset" width="100px">重置</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <div class="grid-content ep-bg-purple">
            <el-button type="primary" icon="Plus" @click="addproducter">添加</el-button>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content ep-bg-purple">
            <el-button type="danger" icon="Delete" @click="handleDelete1" :disabled="!flg">删除</el-button>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <el-main>
      <el-table :data="proDate" style="width: 100%;margin-top: 100px;" row-key="producterId" border
        @selection-change="handleSelectionChange" ref="tableRef">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="producterId" label="厂家id" align="center" width="80"></el-table-column>
        <el-table-column prop="producterName" label="厂家名称" align="center" width="200"></el-table-column>
        <el-table-column prop="producterCode" label="厂家编码" align="center"></el-table-column>
        <el-table-column prop="producterPerson" label="联系人" align="center"></el-table-column>
        <el-table-column prop="producterTel" label="电话" align="center"></el-table-column>
        <el-table-column prop="keywords" label="关键字" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.status == 0" type="success">正常</el-tag>
            <el-tag v-else type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" size="small" icon="Edit"
              @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
            <el-button type="text" size="small" icon="Delete"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-row style="margin-top: 20px;">
        <el-col :span="12" :offset="6">
          <div class="demo-pagination-block">
            <el-pagination @size-change="handleSizeChange" v-model:current-page="pageNum" v-model:page-size="pageSize"
              :page-sizes="[2, 5, 8, 10]" layout="total, sizes, prev, pager, next, jumper" :total="total"
              @current-change="handleCurrentChange" />
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <el-dialog title="添加厂家" v-model="dialogVisible" width="30%" @close="handleDialogClose">
    <el-form :model="producter" label-width="100px">
      <el-form-item label="厂家名称">
        <el-input v-model="producter.producterName" placeholder="请输入厂家名称"></el-input>
      </el-form-item>
      <el-form-item label="厂家编码">
        <el-input v-model="producter.producterCode" placeholder="请输入厂家编码"></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="producter.producterPerson" placeholder="请输入联系人"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="producter.producterTel" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="producter.producterAddress" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="producter.keywords" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="producter.status">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="add">
          确定
        </el-button>
        <el-button @click="close()">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改-->
  <el-dialog title="修改厂家" v-model="dialogVisible1" width="30%" @close="handleDialogClose">
    <el-form :model="producter" label-width="100px">
      <el-form-item label="厂家名称">
        <el-input v-model="producter.producterName" placeholder="请输入厂家名称"></el-input>
      </el-form-item>
      <el-form-item label="厂家编码">
        <el-input v-model="producter.producterCode" placeholder="请输入厂家编码"></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="producter.producterPerson" placeholder="请输入联系人"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="producter.producterTel" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="producter.producterAddress" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="producter.keywords" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="producter.status">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="updateproducter">
          确定
        </el-button>
        <el-button @click="close1()">取消</el-button>
      </div>
    </template>
  </el-dialog>

</template>


<style scoped>
.el-header {
  background-color: #f5f7fa;
  padding: 20px;
}

.el-dialog__body {
  padding: 20px;
}
</style>